<!--
 * @Description: 应用分类
 * @Author: zhaoxiaoyang & seadon
 * @LastEditors: seadon
 * @Date: 2021-07-16 11:24:15
 * @LastEditTime: 2022-09-22 17:10:07
-->
<template>
	<div v-if="data.length" ref="pokCategory" class="pok-application-category">
		<section ref="category" class="category-list">
			<div
				class="category-list-item category-list-all"
				:class="{ 'tab-active': tabActive === '' }"
				@click="handleChangeType('')"
			>
				<span  style="color: #1f2329; font-weight: bolder;">{{ $t('pages.application.all', '全部应用') }}</span>
				<i
					v-show="tabActive === ''"
					class="low-code icona-Frame7024 tab-icon-xiaolian"
				></i>
			</div>
			<div
				v-for="item in data"
				:key="item.group_id"
				class="category-list-item"
				:class="{ 'tab-active': tabActive === item.group_id }"
				@click="handleChangeType(item.group_id)"
			>
				<div class="item-text">
					<EllipsisTooltip :title="item.group_name" />
				</div>

				<i
					v-show="tabActive === item.group_id"
					class="low-code icona-Frame7024 tab-icon-xiaolian"
				></i>
			</div>
		</section>
		<span
			v-show="categoryHeight > 90"
			class="more-btn"
			@click="handleToggleMore"
		>
			{{
				isMore
					? $t('pages.application.putAway', '收起')
					: $t('pages.application.unfold', '展开')
			}}
			<i v-if="isMore" class="low-code iconxiangyou11"></i>
			<i v-else class="low-code iconxiangyou1"></i>
			<!-- <Arrow :expand="isMore" down /> -->
		</span>
	</div>
</template>

<script setup lang="ts">
import {
	ref,
	unref,
	defineProps,
	onMounted,
	defineEmits,
	onBeforeUnmount,
} from 'vue'
import Arrow from '@/entry_desktop/components/Basic/Arrow.vue'
import EllipsisTooltip from '@/entry_desktop/components/EllipsisTooltip'
import type { IGroupList } from '../../type'

const props = defineProps<{
	data: IGroupList[]
}>()
const emit = defineEmits(['onChangeType'])

const isMore = ref(false)
const category = ref()
const pokCategory = ref()
const categoryHeight = ref()
const autoContent = () => {
	if (props.data.length) {
		categoryHeight.value = unref(category).offsetHeight
		if (isMore.value) {
			unref(pokCategory).style.maxHeight = 'none'
		} else {
			unref(pokCategory).style.maxHeight = 90 + 'px'
		}
	}
}

const tabActive = ref('')
const handleChangeType = (id: string) => {
	tabActive.value = id
	emit('onChangeType', id)
}

const handleToggleMore = () => {
	isMore.value = !unref(isMore)
	autoContent()
}

onBeforeUnmount(() => {
	window.removeEventListener('resize', autoContent)
})

onMounted(() => {
	autoContent()
	window.addEventListener('resize', autoContent)
})
</script>
